پاسخ هوش مصنوعی

در React.js، Props Types به ما اجازه می دهند که نوع داده های ورودی به کامپوننت های خود را مشخص کنیم. این ویژگی به ما کمک می کند تا خطاهای مربوط به نوع داده ها را شناسایی کنیم و در نتیجه کد خود را امن تر و قابل درک تر کنیم.

برای استفاده از Props Types، شما می توانید از کتابخانه prop-types استفاده کنید. این کتابخانه شناسایی نوع داده هایی که به Props یک کامپوننت ارسال می شوند را آسان تر می کند. همچنین، اگر پروپس غیرمنتظره ای ارسال شود، به شما هشدار می دهد.

نمونه ای از استفاده از Props Types:

import React from 'react';
import PropTypes from 'prop-types';

const Greeting = ({ name, age }) => {
  return 
سلام {name}، شما {age} سال دارید.
;
};

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};

export default Greeting;

در این مثال، ما یک کامپوننت Greeting داریم که دو پروپس به نام های name و age دریافت می کند. با استفاده از PropTypes، ما مشخص کرده ایم که name باید یک رشته باشد و age باید یک عدد باشد. همچنین با استفاده از isRequired مشخص کرده ایم که این پروپس ها الزامی هستند.

این ویژگی به شما کمک می کند تا از بروز خطاهای احتمالی جلوگیری کنید و کد تمیزتری داشته باشید.

نکته اول اینکه شما باید بدونید Props در react.js چیست که توصیه میکنم حتما مطالعه بفرمایید.

همونطور که توی لینک بالا اشاره شده یک صفحه SPA از کامپوننت های مختلفی تشکیل شده. این کامپوننت ها در شرایط مختلفی نیاز به متغیرها یا پارامترهایی دارن. مثلا ممکنه یه کامپوننت که برای هدر یک سایت استفاده میشه برخی از اطلاعاتش رو نیاز داشته باشه از دیتابیس یا به صورت متغیر بخونه.

در این حالت از Props ها استفاده میشه. در واقع میشه گفت Props ها همون پارامترهای ورودی به کامپوننتها هستن.

Props Type در React.js

خب حالا این متغیرهایی که به کامپوننت ها ارسال میشن در اکثر مواقع نیاز دارن که Validation هایی روی اونها صورت بپذیره. مثلا میخوایم تعیین کنیم که حتما Props ارسال شده به کامپوننت از نوع string باشه و یا از نوع number باشه.

پس میشه گفت ما از Props Type ها برای اعتبار سنجی استفاده می کنیم.

برای استفاده از Props Type ها در ابتدا باید پکیج مورد نظر رو توسط npm نصب کنیم

npm install --save prop-types

بعد از اون در بالای کامپوننت باید کتابخانه مورد نظر رو فراخوانی کنیم

import propType from 'prop-types';

و در نهایت هم میتونیم از این پراپس تایپ ها استفاده کنیم. به مثال زیر توجه کنید

const MyPropsComponent =(propsVar)=>{
    return(
        <h1>
            This Leseon is about {propsVar.name} And Age {propsVar.age}
        </h1>
    )
}

در بالا یک کامپوننت به نام MyPropsComponent داریم که 2 Props به نام name و age داره. حالا ما میخوایم که name حتما از نوع string باشه و age حتما از نوع number و همچنین age حتما وارد شده باشه یعنی isRequired باشه و name هم یک مقدار پیش فرضی رو داشته باشه. پس به صورت زیر می نویسیم

import React from 'react';
import propType from 'prop-types';

const MyPropsComponent =(propsVar)=>{
    return(
        <h1>
            This Leseon is about {propsVar.name} And Age {propsVar.age}
        </h1>
    )
}



export default MyPropsHtmlTag;
MyPropsComponent.propType={
    name : propType.string,
    age : propType.number.isRequired
}

MyPropsComponent.defaultProps={
    name : 'myname'
}

الان اگر هر کدوم از شرایط مشخص شده در Props Type ها رعایت نشه در Consol مرورگر خطا ایجاد میکنه

موفق باشید